import { View, Image, Text, ViewProps } from "@tarojs/components";
import { getImg, getOptionTxt, previewImage } from "@/utils";
import { TPlanMotion } from "@/types";
import "./index.less";
import "../../planadd/MotionSets/index.less";
import { SetsTypeOptions, UnitOptions } from "@/utils/options";

type Props = {
  item: TPlanMotion;
  headerLeftSlot?: any;
  setsSlot?: any;
  headerRightSlot?: any;
  onClick?: (e: any) => void;
  onOpenDetail?: (id: string) => void;
} & ViewProps;

const PlanMotion = ({
  item,
  headerLeftSlot = null,
  setsSlot = null,
  headerRightSlot = null,
  onClick,
  onOpenDetail,
  ...others
}: Props) => {
  const unit = getOptionTxt(item.unit, UnitOptions);
  const count = getOptionTxt(item.setsType, SetsTypeOptions);

  return (
    <View className="plan-motion" {...others}>
      <View className="plan-motion-header" onClick={onClick}>
        <View className="plan-motion-header__imagewraper">
          <Image
            mode="aspectFill"
            src={getImg(item.img)}
            onClick={(e) => {
              e.stopPropagation();
              onOpenDetail && onOpenDetail(item.motionId);
            }}
          />
        </View>

        <View className="plan-motion-header-right">
          <View className="flex-between">
            <Text className="plan-motion-header-right__title">{item.name}</Text>
          </View>
          <View className="flex-between" style={{ marginTop: "10px" }}>
            {headerLeftSlot ? (
              headerLeftSlot
            ) : (
              <Text className="light-txt">
                {item.recordWay === 0 ? `${item.sets.length}组` : "计时"}
              </Text>
            )}

            {headerRightSlot
              ? headerRightSlot
              : item.recordWay === 0 && (
                  <View
                    className="light-txt nowrap"
                    style={{
                      width: "60%",
                    }}
                  >
                    {item.sets.map((set, index) => (
                      <>
                        <Text>
                          {set[0]}
                          {unit} x {set[1]}
                          {count}
                        </Text>
                        {index < item.sets.length - 1 && (
                          <Text style={{ margin: "0 6px" }}>/</Text>
                        )}
                      </>
                    ))}
                  </View>
                )}
          </View>
        </View>
      </View>
      {setsSlot}
    </View>
  );
};

export default PlanMotion;
